<template>
	<view class="page_wrapper">
		<view class="form_block">
			<view class="form_row">
				<view class="row_name">功能名称：</view>
				<view class="row_val">
					{{devFunc.funcName}}
				</view>
			</view>
			<view class="form_row">
				<view class="row_name">功能说明：</view>
				<view class="row_val">
					{{devFunc.remark}}
				</view>
			</view>
			<view class="form_row">
				<view class="row_name">创建者：</view>
				<view class="row_val">
					{{devFunc.createUser.name}}
				</view>
			</view>
			<view class="form_row">
				<view class="row_name">助力次数：</view>
				<view class="row_val">
					{{devFunc.userCount}}
				</view>
			</view>
			<view class="form_row">
				<view class="row_name">功能状态：</view>
				<view class="row_val">
					{{devFunc.statusCn}}
				</view>
			</view>
			<view class="form_row">
				<view class="row_name">创建日期：</view>
				<view class="row_val">
					{{dateFormat(devFunc.createTime)}}
				</view>
			</view>
		</view>
		<view class="btns_block">
			<block v-if="devFunc.status === 'undo'">
				<view class="fcz_btn add_btn" :class="{'disabled_btn:': assistLeftCount === 0}" @tap="assistDevFunc()">
					今天可助力次数: {{assistLeftCount}}
				</view>
			</block>
			<block v-else>
				<view class="fcz_btn add_btn" :class="{'disabled_btn:': true}">
					该功能已开发完成
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {parseTime} from '@/utils/index.js'
	export default {
		data() {
			return {
				devFuncId: 0,
				assistLeftCount: 0,
				devFunc: {
					funcName: '',
					createTime: null
				}
			}
		},
		onLoad(option) {
			this.devFuncId = option.devFuncId
		},
		onShow() {
			this.fetchData()
			this.findMyAssistLeftCount()
		},
		methods: {
			dateFormat() {
				if(!this.devFunc.createTime) {
					return ''
				}
			  return parseTime(new Date(this.devFunc.createTime), '{y}-{m}-{d}')
			},
			fetchData() {
				this.devFuncList = []
				uni.showLoading()
				request.get( 
					`/devFuncs/id,${this.devFuncId}`, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					this.devFunc = res
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			assistDevFunc() {
				if(this.assistLeftCount === 0){
					return false
				}
				uni.showLoading()
				const $this = this
				request.putJson( 
					`/devFuncs/id,${this.devFuncId}/assist`, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					$this.fetchData()
					$this.findMyAssistLeftCount()
					uni.showToast({ icon: 'none', title: '助力成功' })
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			findMyAssistLeftCount() {
				uni.showLoading()
				const $this = this
				request.get( 
					`/devFuncs/id,${this.devFuncId}/assist/leftCount`, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					$this.assistLeftCount = res
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
  .page_wrapper{
		.form_block{
			flex: 1;
			padding: 0px 15px;
			overflow-y: scroll;
			.form_row{
				padding-top: 10px;
				padding-bottom: 10px;
				display: flex;
				.row_name{
					width: 100px;
					display: flex;
					align-items: center;
				}
				.row_val{
					flex: 1;
					.dev_func_name{
						text-align: center;
						height: 36px;
						border: 1px solid #c2c2c2;
						border-radius: 5px;
					}
					.remark{
						width: 100%;
						border: 1px solid #c2c2c2;
						border-radius: 5px;
						padding: 10px 0px;
					}
				}
			}
		}
		.btns_block{
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			.fcz_btn{
				flex: 0.8;
				height: 40px;
				color: white;
				background-color: #67C23A;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
			}
			.add_btn{
				background-color: #67C23A;
			}
		}
	}
</style>
